<template>
  <div id="container">
    <div class="pane_container">
      <el-button size="small" @click="changeMap(0)">影像地图</el-button>
      <el-button size="small" @click="changeMap(1)">电子地图</el-button>
      <el-button size="small" @click="changeMap(2)">地形图</el-button>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onBeforeUnmount} from 'vue'
import * as Cesium from 'cesium';
import * as MapWorks from './map-work'
// const Cesium = window.Cesium
const init = () => {
  let container = document.getElementById("container");
  MapWorks.initMap(container)
  MapWorks.changeBaseMap(0)
  let coords = [104.0634012222290039, 30.6598806381225586, 1000]
  let hpr = {
    heading: 0,
    pitch:-45,
    roll: 0
  }
  MapWorks.setView(coords, hpr)
  const position = Cesium.Cartesian3.fromDegrees(
      104.0634012222290039,
      30.6598806381225586,
      30
  )
  //朝向（弧度单位）
  var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, {
    heading: 0,
    pitch:0,
    roll: 0
  });
  // MapWorks.addGlb({
  //   url: "/full.glb",
  //   longitude:104.0634012222290039,
  //   latitude:30.6598806381225586,
  //   height: 50,
  // })
  MapWorks.addGlb2({
    name: 'demo123',
    uri: "/full.glb",
    position,
    orientation,
  })
}

const changeMap = (index) => {
  MapWorks.changeBaseMap(index)
}
onMounted(() => {
  init()
})
onBeforeUnmount(() => {
  MapWorks.destroy();
})
</script>

<style lang="scss" scoped>
#container{
  width: 100%;
  height: 100%;
  background: rgba(7, 12, 19, 1);
  overflow: hidden;
  background-size: 40px 40px, 40px 40px;
  background-image: linear-gradient(hsla(0, 0%, 100%, 0.05) 1px, transparent 0), linear-gradient(90deg, hsla(0, 0%, 100%, 0.05) 1px, transparent 0);
  .pane_container{
    position: absolute;
    left: 10px;
    top: 50px;
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.5);
    color: #ffffff;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 3px 14px rgb(128 128 128 / 50%);
    z-index: 2;
  }
}


</style>
